<template>
  <div class="login">
    <div class="account" v-if="!isPhoneLogin">
      <top-header :isLeft="true" title="欢迎登录每日优鲜"></top-header>
      <div class="login-content">
        <login-input
          v-for="(item, index) in accountData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="login-opreate">
        <a-button type="primary" block shape="round" @click="login">
          登录
        </a-button>
        <a-button type="link" @click="toggleLoginBox">
          使用手机号注册/登录
        </a-button>
      </div>
    </div>

    <div class="phone" v-if="isPhoneLogin">
      <top-header :isLeft="true" title="欢迎登录每日优鲜"></top-header>

      <div class="login-content">
        <login-input
          v-for="(item, index) in phoneData"
          :key="index"
          :info="item"
        ></login-input>
      </div>
      <div class="login-opreate">
        <a-button type="primary" block shape="round" @click="plogin">
          登录/注册
        </a-button>
        <a-button type="link" @click="toggleLoginBox">
          使用账号密码登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import LoginInput from "../components/LoginInput.vue";
import TopHeader from "../components/TopHeader.vue";
import QS from "qs"
export default {
  components: { LoginInput, TopHeader },
  name: "login",
  data() {
    return {
      VCode: "",
      accountData: {
        email: {
          label: "用户名/邮箱",
          val: "",
        },
        password: {
          label: "密码",
          val: "",
          type: "password",
        },
      },
      phoneData: {
        phoneNum: {
          label: "手机号码",
          val: "",
        },
        verificationCode: {
          label: "验证码",
          val: "",
          right: "点击获取验证码",
          toogle: this.getVerificationCode,
        },
      },
      isPhoneLogin: false,
    };
  },
  methods: {
    // 切换登录模式
    toggleLoginBox() {
      this.isPhoneLogin = !this.isPhoneLogin;
    },

    // 获取验证码
    getVerificationCode() {
      const self = this;
      this.$http.get("/api/getVerificationCode").then(
        (res) => {
          self.VCode = res.data.data.num;
          self.$success({
            title: "验证码",
            content: (
              <div>
                <p>{self.VCode}</p>
              </div>
            ),
          });
        },
        (error) => {
          self.$message.error(error);
        }
      );
    },

    // 登录按钮
    login() {
      console.log(this.accountData)
          this.$store.commit('setAccountData',this.accountData)
            let params=QS.stringify({
                username:this.accountData.email.val,
                password:this.accountData.password.val,             
                })
      this.$http
        .post("/work/box-horse/login.php",params)
        .then((result) => {
          if (result.data.code==200) {
                  console.log(result.data)
                  this.$message.success("登录成功");
                  let userInfo=result.data.data;
                  this.$store.commit('setUserInfo',userInfo)
                  this.$router.push('/me')
          }else if (result.data.code==-1) {
                  this.$message.error("请输入用户名或邮箱号！");               
          }else if(result.data.code==-2){
                  this.$message.error("用户不存在！");
          }else if(result.data.code==-3){
                  this.$message.error("请输入密码！");
          }else if(result.data.code==-4){
                  this.$message.error("密码不正确！");
          }
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    plogin(){
         const self = this;
         let promise = null;
         console.log(this.phoneData)
          this.$store.commit('setphoneData',this.phoneData)
            let params=QS.stringify({
                username:this.phoneData.phoneNum.val,
                password:this.phoneData.verificationCode.val,        
                })
      if (self.VCode != this.phoneData.verificationCode.val){
         this.$message.error("输入有误");
         }
      else{this.$http
        .post("/work/box-horse/Plogin.php",params)
        .then((result) => {
              if(result.data.code==200){
              this.$message.success("登录成功");
              let userInfo=result.data.data;
              this.$store.commit('setUserInfo',userInfo)
              this.$router.push('/me')                       
             }else if(result.data.code==-1) {
                  this.$message.error("请输入手机号！");               
             }else if(result.data.code==-2){
                  this.$message.error("请输入正确的手机号");
             }else if(result.data.code==-3){
                  this.$message.error("用户不存在！");
             }else if(result.data.code==-4){
                  this.$message.error("请输入验证码！");
             }
        })
        
        .catch((err) => {
          console.log(err);
        });
    }
    }
  },
};
</script>
<style lang="scss" scoped>
.ant-btn-link {
  color: #FF6347;
}
.login {
  width: 100%;
  height: 100%;
  background-color: $app-bg-color;
  .account,
  .phone {
    height: 100%;
    .login-content {
      padding: $common-padding;
    }
    .login-opreate {
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
}
h2 {
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi {
  font-size: 20px;
  font-weight: bolder;
}
.ant-btn-block {
  width: 100%;
  background-color: #FF6347;
  border-color: #FF6347;
}
</style>